<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{:config('app.static')}/css/Helper.css">
    <link rel="stylesheet" href="{:config('app.static')}/font/iconfont.css">
    <link rel='stylesheet' type='text/css' href="{:config('app.static')}/css/main.css"/>
    <title>付款</title>
    <style>
        .englishFont {
            font-family: 'HelveticaNeue';
        }
        
        i {
            font-family: 'iconfont';
            font-size: 20px;
            font-style: normal;
        }
        
        .Wathet {
            color: #3bacfa
        }
        
        .bankColor {
            color: #008a8f;
        }
        
        .lightgreen {
            color: #34bb20
        }
        
        .blue {
            color: #2c99b8
        }
        
        .bc2 {
            border-color: #f2f2f2;
        }
        
        .bc3 {
            border-color: #e5e5e5;
        }
        
        .bg2 {
            background-color: #f0f4f7;
        }
        
        .red {
            color: rgb(221, 37, 46)
        }
        
        .bgblue {
            background-color: #2c99b8
        }
        
        .crw {
            color: white
        }
        
        .touying {
            -moz-box-shadow: -5px 4px 15px rgba(0, 0, 0, .2);
            -webkit-box-shadow: -5px 4px 15px rgba(0, 0, 0, .2);
            box-shadow: -5px 4px 15px rgba(0, 0, 0, .2);
        }
        
        .paymentBox {
            width: 767px;
        }
        
        @media (max-width: 767px) {
            .paymentBox {
                width: 100%;
            }
            #PC_pay {
                display: none;
            }
        }
    </style>
</head>
<body>
<!--PC支付-->
<div class="prcen-x touying paymentBox" id="PC_pay">
    <!--支付宝图标-->
    <div id="PC_alipay" class="dn">
        <div class="h60px  tac lh60">
            <!--<i class="Wathet fs42 mr5">&#xe600;</i>-->
        </div>
        <div class="bg2 tac pb30 ">
            <p class="ptb15">
                <span class="fs42 englishFont fwb red price"></span>
                <span class="fs18 ml10">{:$pay_amount}元</span>
            </p>
            <img src="{$url}" class="dib w230px h230px qrcodeImg">
            <p class="fs16 mb25 mt10">请在3分钟内完成支付</p>
            <!--<p class="fs16 fwb">付款即时到帐,未到帐可联系我们</p>-->
            <p class="fs16 fwb mtb10">订单号:
                <span class="ml10 orderNumber">{:$oid}</span>
            </p>
            <!--<div class="mt20">-->
            <!--<span class="dib ptb5 plr20 bgblue br100 crw fs16 mlr10 minute"></span>-->
            <!--<span class="dib ptb5 plr20 bgblue br100 crw fs16 second"></span>-->
            <!--</div>-->
        </div>
        <div class="tac h60px  lh60 pr prcen-xy-parent-dja">
            <i class="blue fwb fs42">&#xe611;</i>
            <span class="fs20 ml10 dib" style="color: red;">打开云闪付【扫一扫】</span>
        </div>
    </div>

</div>


<!--手机支付支付宝-->
<div class="prcen-x touying paymentBox dn" id="alipayMobile">
    <div class="h60px  tac lh60 pr prcen-xy-parent-dja">
        <!--<i class="Wathet fs42 mr5">&#xe600;</i>-->
    </div>
    <div class="bg2 tac pb30">
        <p class="ptb15">
            <span class="fs42 englishFont fwb red price"></span>
            <span class="fs18 ml10">{$pay_amount}元</span>
        </p>
        <img src="{:$url}" alt="" class="dib w230px h230px qrcodeImg">
        
        <p class="mt15 red" style="font-size:16px;">1.长按二维码图片,保存到手机</p>
        <p class="mt10 red" style="font-size:16px;color: red;">2.打开云闪付,扫一扫“相册”二维码</p>
        <!--<a href="" id="startupAlipay" class="dib ptb10 bgblue crw br4 mt20 fs16" style="font-size:16px;width:300px;">启动支付宝</a>-->
        <br/>
        <!--<div class="mt20">-->
        <!--&lt;!&ndash; <span class="dib ptb5 plr20 bgblue br100 crw fs16 hour"></span> &ndash;&gt;-->
        <!--<span class="dib ptb5 plr20 bgblue br100 crw fs16 mlr10 minute"></span>-->
        <!--<span class="dib ptb5 plr20 bgblue br100 crw fs16 second"></span>-->
        <!--</div>-->
        <p class="fs16 fwb mt25">支付完成后，请返回此页面</p>
        <p class="fs16 fwb mtb10">订单号:
            <span class="ml10 orderNumber">{:$oid}</span>
        </p>
    </div>
</div>
</body>
</html>
<script src="{:config('app.static')}/js/jquery-2.1.4.js"></script>
<script>
    window.onload = function() {
        $(".goback").click(function() {
            window.history.go(-1);
        });

        function checkTime(i) { //将0-9的数字前面加上0，例1变为01
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }


        //判断PC端还是手机端
        var pc_type = "";
        var ua = navigator.userAgent;
        var number; //3：PC   4：手机端
        var type = 2;
        if (ua.indexOf("Android") > 0 ||ua.indexOf("iPhone") > 0 ||ua.indexOf("iPad") > 0
        ) {
            number = 4;
        } else {
            number = 3;
        }


        //PC端:3   移动端:4
        if (number == 3) {
            if (type == 1) {
                //微信
                $('#PC_wechat').show();
                $("#PC_alipay").hide();
                $("#PC_bank").hide();

            } else if (type == 2) {
                //支付宝
                $("#PC_alipay").show();
                $("#PC_wechat").hide();
                $("#PC_bank").hide();
            } else if (type == 3) {
                //银联
                $("#PC_bank").show();
                $("#PC_wechat").hide();
                $("#PC_alipay").hide();
            }
        } else if (number == 4) { //移动端:4
            //1 微信
            if (type == 1) {
                $('#PC_pay').hide();
                $('#wechatMobile').show();
                $('#alipayMobile').hide();
                $('#bankMobile').hide();

            } else if (type == 2) {
                //支付宝
                $('#PC_pay').hide();
                $('#alipayMobile').show();
                $('#wechatMobile').hide();
                $('#bankMobile').hide();

                // $('#startupAlipay').attr('href', res.data.qrcode);

                /* 在支付宝后面添加页面，需把url拼接地址进行编码处理，才可以解析 */
                // var purl = escape('https://pay.mmbbo.cn/operate.html?price=' + res.data.actual_price + '&url=' + res.data.qrcode + '');
                // var alipayUrl = 'alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode=' + purl + '';
                // $('#startupAlipay').attr('href', alipayUrl);
            } else if (type == 3) {
                //银联
                $('#PC_pay').hide();
                $('#bankMobile').show();
                $('#alipayMobile').hide();
                $('#wechatMobile').hide();
            }
        }

        var billData = {
            'oid': "{$oid}"
        }
        var timers = setInterval(function() {
            $.ajax({
                type: "post",
                url: "http://167.179.112.200/queryorder/union",
                dataType: 'json',
                data: billData,
                success: function(res) {
                        if (res.pay_status == 2) {
					
                            clearInterval(timers);
							 alert('支付成功');
                           window.location=res.pay_callbackurl;
                        }
                }
            })
        }, 1000);


    }
</script>